<template>
  <div id="editor" />
</template>

<script>
import editor from 'wangeditor'
export default {
  name: 'Editor',
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    let Editor = new editor('#editor')
    Editor.customConfig.uploadImgShowBase64 = true
    Editor.customConfig.menus = [
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'todo',
      'justify',
      'quote',
      'emoticon',
      'splitLine',
      'undo',
      'redo'
    ]
    Editor.customConfig.onchange = (html) => {
      this.$emit('change', html)
    }
    this.editor = Editor
    this.editor.create()
  },
  methods: {
    clearCon() {
      this.editor.txt.clear()
    },
    setContent(content) {
      this.editor.txt.html(content)
    },
    getContent() {
      return this.editor.txt.html()
    }
  }
}
</script>

<style scoped>
.editor {
  height: 400px;
  border: 1px solid red;
}
</style>